<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          type="textarea"
          :autosize="{ minRows: 20, maxRows: 20 }"
          placeholder="请输入需要格式化的header"
          v-model="inputString"
        />
        <pre>
说明：
  将 Accept: application/json, text/plain, */* 格式转换成
{
  "Accept":"application/json, text/plain, */*",
}
        </pre>
      </el-col>
      <el-col :span="2">
        <div
          style="
            width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <el-button type="primary" @click="changeFormat">转换</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <el-input
          type="textarea"
          :autosize="{ minRows: 20, maxRows: 20 }"
          v-model="outputString"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HeadeFormat",
  data() {
    return {
      inputString: "",
      outputString: "",
    };
  },
  methods: {
    changeFormat() {
      let res = "";
      res += "{\n";
      let arr = this.inputString.split("\n");
      arr.forEach((elem) => {
        let brr = elem.split(": ");
        res += '"' + brr[0] + '":' + '"' + brr[1] + '",\n';
      });
      res += "}";
      this.outputString = res;
    },
  },
};
</script>

<style scoped></style>
